<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网络状态监控</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <style id="networkStyle">
        html, body {
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-fluid" style="height: calc(100% - 30px);">
    <div id="conectDiv">
        <!--      <img id="background_img" src="../svg/InternetBackGround_line17.svg" width="1800" height="930">-->
        <img id="background_img" class="svg social-link" src="../svg/IntelNet2.svg" width="1800" height="930">
        <!--      <img id="type4_img1" class="10114" src="../svg/4.svg" width="71.6" height="77.3">-->
        <!--      <img id="type4_img2" class ="10115" src="../svg/4.svg" width="71.6" height="77.3">-->
        <!--      <img id="type4_img3" src="../svg/4.svg" width="71.6" height="77.3">-->
        <!--      <img id="type4_img4" src="../svg/4.svg" width="71.6" height="77.3">-->
        <!--      <img id="type2_img1" src="../svg/10084.svg" width="105.9" height="100.5">-->
        <!--      <img id="type2_img2" src="../svg/10084.svg" width="105.9" height="100.5">-->
        <!--      <img id="type2_img3" src="../svg/10084.svg" width="105.9" height="100.5">-->
        <!--      <img id="type2_img4" src="../svg/10084.svg" width="105.9" height="100.5">-->
        <!--      <img id="type2_img5" src="../svg/10084.svg" width="105.9" height="100.5">-->
        <!--      <img id="type2_img6" src="../svg/10084.svg" width="105.9" height="100.5">-->
        <!--      <img id="type6_img1" src="../svg/6.svg" width="98.9" height="60.8">-->
        <!--      <img id="type6_img2" src="../svg/6.svg" width="98.9" height="60.8">-->
        <!--      <img id="type6_img3" src="../svg/6.svg" width="98.9" height="60.8">-->
        <!--      <img id="type6_img4" src="../svg/6.svg" width="98.9" height="60.8">-->
        <!--      <img id="type6_img5" src="../svg/6.svg" width="98.9" height="60.8">-->
    </div>
</div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script src='../../layuiadmin/modules/echarts.js'></script>
<script src='../../layuiadmin/modules/echarts-liquidfill.js'></script>
<script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
    , my_send: '../myModules/my_send'
  }).use(['index','my_send','jquery'],function(){
    http_proxy = layui.http_proxy
            , my_send = layui.my_send
            ,$ = layui.$
            ,jQuery = layui.jquery;
        /*
  * Replace all SVG images with inline SVG
  */
        jQuery('img.svg').each(function () {
            console.log("each...........network!")
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');
            var styleScop = $img.attr('style');

            //SVG 将其替换为链接文件中的内联SVG
            jQuery.get(imgURL, function (data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if (typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if (typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass + ' replaced-svg');
                }
                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');
                // $svg.attr("style",styleScop+"fill: red;");
                // $img.attr("width","100%");
                // $img.attr("height","100%");
                // Replace image with new SVG
                $img.replaceWith($svg);
            }, 'xml');
        });


        $.ajax({
            type: "get",
            async: false, //异步执行
            url: http_proxy("/alarm/monitoringStatus"),
            dataType: "json", //返回数据形式为json
            success: function (data) {
                var networkData = data.data;
                console.log();
                for (var i = 0; i < networkData.length; i++) {
                    var d = networkData[i];
                    var name = d.name;
                    var value = d.value;
                    if (value == 0 || value == "0") {
                        var networkStyle = $("#networkStyle").html();//DC143C
                        var strStyle = networkStyle + "." + name + "{fill: #DC143C !important;}";
                        console.log(strStyle);
                        $("#networkStyle").html(strStyle);
                    }
                }
            },
            error: function (errorMsg) {
                alert("请求数据失败..." + errorMsg);
            }
        });
    });
</script>
</body>
</html>
